<template>
  <div>
    <nav-bar title="视频中心"></nav-bar>
    <div class="maxinBox">
      <form action="/">
        <van-search
          v-model="videoName"
          show-action
          placeholder="请输入设备名称"
          @cancel="onCancel"
          @change="getVideoList"
        />
      </form>
      <div class="video">
        <van-row>
          <equipment v-for="(item, index) in videoList" :key="index" :data="item" @click.native="videoDetails(item)"></equipment>
        </van-row>
      </div>
    </div>

  </div>
</template>

<script>
  import Equipment from './components/Equipment.vue'
  import videoAPI from '../../../api/workAPI/videoAPI.js'
  export default {
    components: {
      Equipment
    },
    data() {
      return {
        videoName: '',
        videoList: []
      }
    },
    methods: {
      // 查询视频列表
      getVideoList() {
        videoAPI.getVideoList(this.videoName).then(res => {
          this.videoList = res
        })
      },
      // 搜索取消
      onCancel() {
        this.getVideoList()
      },
      // 查看视频详情
      videoDetails(data) {
        this.$router.push({
          name: 'VideoDetails',
          params: {
            data: data
          }
        })
      }
    },
    mounted() {
      this.getVideoList()
    }
  }
</script>
